/* eslint-disable react-hooks/rules-of-hooks */
import React from "react";
import { CityApi, getCityListApi } from "../../api/city";
import { Grid, IndexBar, List, SearchBar } from "antd-mobile";
import { useLoaderData, useNavigate, useParams } from "react-router-dom";
import styles from "./css/city.module.css";
import { useDispatch } from "react-redux";
import { setCity } from "../../store/slice/ticketSlice";
function index() {
  const { citywz, hotCities, cityList } = useLoaderData();
  let nav=useNavigate()
  let params=useParams()
  const dispatch=useDispatch()
  const saveCity=(propName,city)=>{
    dispatch(setCity({propName,city}))
    nav(-1)
  }
  return (
    <div>
      <SearchBar placeholder="请输入内容" />
      <div>
        <div onClick={()=>saveCity(params.type,citywz)}>当前城市:{citywz}</div>
        <div>
          <div>热门城市</div>
          <div>
            <Grid columns={3} gap={8}>
              {hotCities.map((item, index) => {
                return (
                  <Grid.Item key={index} onClick={()=>saveCity(params.type,item.name)}>
                    <div className={styles["grid-demo-item-block"]}>
                      {item.name}
                    </div>
                  </Grid.Item>
                );
              })}
            </Grid>
          </div>
        </div>
        <div >
          <IndexBar style={{ height: window.innerHeight }}>
            {cityList.map((group) => {
              const { title, items } = group;
              return (
                <IndexBar.Panel
                  index={title}
                  //   title={`标题${title}`}
                  key={`标题${title}`}
                >
                  <List>
                    {items.map((item, index) => (
                      <List.Item key={index} onClick={()=>saveCity(params.type,item.name)}>{item.name}</List.Item>
                    ))}
                  </List>
                </IndexBar.Panel>
              );
            })}
          </IndexBar>
        </div>
      </div>
    </div>
  );
}

export default index;
export const loader = async () => {
  const { data: res } = await CityApi();
  console.log(res);

  const { data: res1 } = await getCityListApi();
  console.log(res1);

  return {
    citywz: res.city,
    hotCities: res1.hotCities,
    cityList: res1.cityList,
  };
};
